<template>
    <customNavigationBar title="管家转让" />

    <view class="content">
        <view class="item" v-for="item in GJList.records" :key="item.userId">
            <view class="top">
                <image class="avatar" :src="item.avatar" mode="aspectFit"></image>

                <view class="infomation">
                    <view class="info">
                        <text>{{ item.nickname }}</text>
                        <text>{{ item.grade === 2 ? '金牌管家' : '悦居管家' }}</text>
                        <text>客户：{{ +item.clientNum }}人</text>
                    </view>

                    <view class="phone">管家电话：{{ item.phone ? item.phone.slice(0, 3) + '****' + item.phone.slice(7) : '暂无' }}</view>

                    <view class="address">管家小区：{{ item.community }}</view>
                </view>
            </view>

            <view class="buttons">
                <view @click="changeGJ(item)">确认更换</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { homeApis } from '@/utils/apis';
const pageParams = ref({
    current: 1,
    size: 20
});

const toTransferUserId = ref('');
const comId = ref('');
onLoad((e) => {
    toTransferUserId.value = e.id;
    comId.value = e.comId;
    getList();
});

onReachBottom(() => {
    if (pageParams.value.current < GJList.value.pages) {
        pageParams.value.current++;
        getList();
    }
});

const changeGJ = async (item) => {
    uni.showModal({
        title: '确认是否转让',
        success(res) {
            if (res.confirm) {
                homeApis
                    .changeGJ({
                        toTransferUserId: item.userId,
                        transferCommunityId: comId.value,
                        transferUserId: toTransferUserId.value
                    })
                    .then((res) => {
                        uni.showModal({
                            title: '转让成功',
                            showCancel: false,
                            success(res) {
                                if (res.confirm) {
                                    uni.navigateBack();
                                }
                            }
                        });
                    });
            }
        }
    });
};

const GJList = ref({});
const getList = async () => {
    let res = await homeApis.getGJList({ ...pageParams.value });

    if (res.data.current == 1) {
        GJList.value = res.data;
    } else {
        if (GJList.value.current != res.data.current) {
            let records = [...GJList.value.records, ...res.data.records];
            GJList.value = { ...res.data, records };
        }
    }
};
</script>
<style>
page {
    background: #f2f4f5;
}
</style>
<style lang="scss" scoped>
.content {
    padding: 24rpx;

    .item {
        margin-bottom: 24rpx;
        width: 100%;
        background: #ffffff;
        border-radius: 16rpx;

        padding: 24rpx;

        .top {
            display: flex;
            align-items: center;
            gap: 34rpx;

            .avatar {
                width: 144rpx;
                height: 144rpx;
                background: #999999;
                border-radius: 72rpx;
            }

            .infomation {
                flex: 1;
                .info {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    text {
                        font-size: 24rpx;
                        color: #000000;
                        line-height: 34rpx;
                    }
                }
                .phone {
                    margin-top: 22rpx;
                    font-size: 24rpx;
                    color: #000000;
                    line-height: 34rpx;
                }
                .address {
                    margin-top: 20rpx;
                    font-size: 24rpx;
                    color: #000000;
                    line-height: 34rpx;
                }
            }
        }
        .buttons {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 32rpx;
            margin-top: 36rpx;

            view {
                width: 192rpx;
                height: 60rpx;
                border-radius: 44rpx;
                border: 2rpx solid #2c72ff;
                font-size: 28rpx;
                color: #2c72ff;
                line-height: 56rpx;
                text-align: center;

                &:last-child {
                    color: #fff;
                    background-color: #2c72ff;
                }
            }
        }
    }
}
</style>
